<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作用域-let-const暂时性死区</title>
  <!-- 
  在JavaScript中， let  和  const  引入了一种新的作用域特性，称为“暂时性死区”（Temporal Dead Zone，TDZ）。理解暂时性死区对于掌握  let  和  const  的行为非常重要。
  1. 什么是暂时性死区
  暂时性死区是指在代码块中，使用  let  或  const  声明的变量在声明之前是不可访问的。如果在声明之前尝试访问这些变量，JavaScript 将抛出一个错误。

  2. 暂时性死区的行为
  - 变量提升：虽然  let  和  const  声明的变量会被提升，但它们不会被初始化。也就是说，在声明之前，这些变量是处于“死区”的状态。
  - 访问限制：在死区内访问这些变量会导致  ReferenceError  错误。

  3. 示例
  以下是一个示例，展示了暂时性死区的行为：
  console.log(a); // 报错: Cannot access 'a' before initialization
  let a = 10;

  console.log(b); // 报错: Cannot access 'b' before initialization
  const b = 20;
  在上面的代码中，试图在  let a = 10;  和  const b = 20;  之前访问变量  a  和  b ，都会导致错误。

  4. 暂时性死区的范围
  暂时性死区的范围仅限于块级作用域。例如：
  {
      console.log(c); // 报错: Cannot access 'c' before initialization
      let c = 30;
  }
  在这个例子中，变量  c  的死区仅在其块级作用域内存在。

  5. 与  var  的比较
  与  var  不同， var  声明的变量会被提升并初始化为  undefined ，因此可以在声明之前访问，而不会抛出错误。例如：
  console.log(d); // 输出: undefined
  var d = 40;

  6. 总结
  - 暂时性死区是指在使用  let  或  const  声明的变量之前，这些变量是不可访问的。
  - 尝试在死区内访问这些变量会导致  ReferenceError  错误。
  - 暂时性死区的存在是为了避免在变量未初始化之前使用它们，从而提高代码的安全性和可读性。
  - 理解暂时性死区对于有效使用  let  和  const  是非常重要的，能够帮助开发者避免潜在的错误和问题。
  -->
</head>

<body>

  <script>
    // 1. 暂时性死区的概念
    // 暂时性死区（Temporal Dead Zone）是指在变量声明之前，该变量是不可访问的。在 ES6 中，使用  let  和  const  声明的变量具有暂时性死区。

    // function show() {
    //   console.log(a); // 报错: Cannot access 'a' before initialization

    //   console.log("hello");
    //   let a = 10;
    // }

    // show()

    // 2.暂时性死区和定义的位置没有关系, 和代码执行的顺序有关系
    function foo() {
      console.log(message);
    }

    let message = "hello world";
    foo(); // 输出: hello world

    // 3. 暂时性死区的错误
    // 在暂时性死区内访问变量会导致  ReferenceError  错误。例如：
    {
      // console.log(a); // 报错: Cannot access 'a' before initialization
      let a = 10;
    }

    // 4. 暂时性死区形成之后, 在该区域内这个标识符不能访问
    let info = "hello let";
    function bar() {
      // console.log(info); // 报错: Cannot access 'info' before initialization
      const info = "hello const";
    }

    bar()

  </script>

</body>

</html>